//out:../css/
@import './base.less';

@vw:3.75vw;

body{
    background-color: #f9fafb;
}

header{
    width: 100%;
    height: (50/@vw);
    justify-content: space-between;
    display: flex;
    align-items: center;
    background-color:#fff;
    position: fixed;
    top: 0;
    .left{
        width: (235/@vw);
        height: (50/@vw);
        display: block;
    }
    img{
        width: 100%;
        height: 100%;
    }
    button{
        width: (80/@vw);
        height: (30/@vw);
        margin-right: (15/@vw);
        background-color: #ffe31b;
        border: none;
        border-radius: (30/@vw);
        font-size: (12/@vw);
    }
}

.title{
    width: 100%;
    height: (52/@vw);
    // background-color: #ffe31b;
    display: block;
    margin-top: (50/@vw);
    padding: (10/@vw) (15/@vw);
    div{
        width: (345/@vw);
        height: (32/@vw);
        background-color: #f2f4f5;
        border-radius:(16/@vw) ;
        line-height: (32/@vw);
        text-align: center;
        font-size: (12/@vw);
    }
    img{
        width: (14/@vw);
        margin-bottom: (8/@vw);
    }
}

.banner{
    width: (345/@vw);
    height: (108/@vw);
    margin: 0 auto;
    border-radius: (6/@vw);
    background-image: url('../assets/banner01.jpeg');
    background-size:(345/@vw) ;
    background-position: 0 (-13/@vw);
}

main{
    width: (345/@vw);
    margin: 0 auto;
    
    .m1{
        display: flex;
        justify-content: space-between;
        line-height:(26/@vw) ;
        height: (26/@vw);
        margin: (20/@vw ) 0;
        h2{
            font-size: (21/@vw); 
        }
        span{
            font-size: (14/@vw);
        }
    }
    li{
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        border-radius: (5/@vw);
        padding-right: (20/@vw);
        margin-bottom: (20/@vw);
        img{
            width: (105/@vw);
            border-radius: (5/@vw);
        }
        h4{
            margin: (5/@vw) 0;
            font-size: (14/@vw);
        }
        p{
            font-size: (12/@vw);
            margin-bottom: (10/@vw);
        }
    }
}
.main{
    width: (345/@vw);
    margin: 0 auto;
    
    .m1{
        display: flex;
        justify-content: space-between;
        line-height:(26/@vw) ;
        height: (26/@vw);
        margin: (20/@vw ) 0;
        h2{
            font-size: (21/@vw); 
        }
        span{
            font-size: (14/@vw);
        }
    }
    li{
        display: flex;
        justify-content: space-between;
        margin-bottom: (20/@vw);
        div{
            width: (105/@vw);
            position: relative;
            h2{
            font-size: (21/@vw); 
            }
            span{
            font-size: (14/@vw);
            }
            img{
                width: 100%;
                border-radius: (10/@vw);
            }
            p{
                font-size: (13/@vw);
                
            }
            .bfl{
                position: absolute;
                width: (70/@vw);
                height: (28/@vw);
                background-color: rgba(000, 000, 000, 0.7);
                left: 0;
                top: (78/@vw);
                border-top-right-radius: (10/@vw);
                border-bottom-left-radius:  (10/@vw);
                color:#fff;
                text-align: center;
                line-height: (28/@vw);
                font-size: (13/@vw);
            }
        }
    }
}

footer{
    width: (345/@vw);
    height: (45/@vw);
    background-color: #fff;
    display: block;
    position: fixed;
    left: 4vw;
    bottom: 8vw;
    border-radius:(45/@vw) ;
    padding: 0 4vw;
    display: flex;align-items: center;
    img{
        width: (36/@vw);
        height: (36/@vw);
    }
    p{
        flex: 1;
        margin-left: (5/@vw);
    }
    button{
        border: none;
        border-radius: (16/@vw);
        width: (32/@vw);
        height: (32/@vw);
    }
}
